<template>
<!-- 页头插槽 -->
  <div class="waike">
    <div class="header">
    <!-- 添加按钮 -->
    <van-icon :name="icon" size="1.2rem" style="position:fixed;top:1.6rem;left:0.6rem;"  @click="alertMenu"/>
    <!-- 弹出框 -->
    <van-action-sheet v-model="show" title="爱分享的人是厨房的天使" duration="0.2">
      <!-- 上传按钮 -->
      <div style="display:flex; margin-top:10%" class="publish">
        <div style="margin:0 25%" @click="show_pop">
          <van-button round icon="photo-o" color="mediumturquoise" style="font-size:30px;width:60px;height:60px"></van-button>
          <p>发作品</p>
        </div>
        <div>
          <van-button round icon="newspaper-o" color="coral" style="font-size:30px;width:60px;height:60px"></van-button>
          <p>传菜谱</p>
        </div>
      </div>
      <!-- 弹出上传界面 -->
      <van-popup v-model="show_upload" style="height:100%;width:100%" closeable close-icon-position="top-left">
        <div class="upload">
        <div class="upload_btn">发布</div>
        <div class="container">
            <!-- 上传照片 -->
            <div class="upload_img">
                <div style="height:88px;text-align:left;max-width:530px" :style="file_width">
                    <van-uploader v-model="fileList" multiple :max-count="6"/>
                </div>
            </div>
            <!-- 发表文字-->
            <van-cell-group inset>
                <van-field v-model="message" rows="3" autosize type="textarea" maxlength="100" 
                placeholder="分享下你的下厨心得、生活点滴" show-word-limit 
                :border="false" :autofocus=true />
            </van-cell-group>
            <!-- 选择标签 -->
            <van-cell class="cell_tab" title="# 标签" is-link to="/" />
            <!-- 标签 -->
            <div style="text-align:left">
                <van-button class="tag_btn" square @click="click_tag1()" :disabled="dis_btn1">
                    早餐·{{today}}
                </van-button>
                <van-button class="tag_btn" square @click="click_tag2()" :disabled="dis_btn2">
                    午餐·{{today}}
                </van-button>
                <van-button class="tag_btn" square @click="click_tag3()" :disabled="dis_btn3">
                    晚餐·{{today}}
                </van-button>
            </div>
        </div>
        </div>
      </van-popup>

    </van-action-sheet>
    <!-- 消息框 -->
    <van-icon name="chat-o" size="1.3rem" style="position:fixed;top:1.6rem;right:0.6rem;"/>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="搜索菜谱、食材"
        @search="onSearch"
        :showAction="false"
      />
    </form>
    <!-- 放顶部三个导航的插槽 -->
    <div class="tab_slot">
      <slot name="tab_slot"></slot>
    </div>
    <!-- 内容 --> 
    <div class="content">
      <!-- <p v-for="i in 50" :key="i" style="position">内容</p> -->
    <!-- 列表懒加载 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>

    <!-- 插槽 -->
    <!-- 各组件不同内容 -->
    <slot></slot>

    </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:'',
      list: [],
      loading: false,
      finished: false,
      show:false,
      icon:"plus",
      fileList:[],
      show_upload:false,
      file_width:{width:"88px"},
      message:"",
      today:"",
      dis_btn1:false,
      dis_btn2:false,
      dis_btn3:false,
    };
  },
  methods: {
    //搜索框内容
    onSearch(val) {
      console.log(val)
    },
    onLoad() {
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      // }, 1000);
    },
    alertMenu(){
      this.show=true;
    },
    show_pop(){
      this.show_upload=true;
    },
            // 点击按钮添加标签
    click_tag1(){
        this.message=this.message+`#早餐·${this.today}  `;
        this.dis_btn1=true;
    },
    click_tag2(){
        this.message=this.message+`#午餐·${this.today}  `;
        this.dis_btn2=true;
    },
    click_tag3(){
        this.message=this.message+`#晚餐·${this.today}  `;
        this.dis_btn3=true;
    },
  },
  mounted(){
        // 获取时间
        var d=new Date();
        this.today=`${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
        // 点击发布界面关闭时 同时关闭发布按钮
        // this.$close(()=>{
        //   this.show=false;
        // })
  },
  watch:{
    show(){
      if(this.show==true){
        this.icon="cross"
      }else{
        this.icon="plus"
      }
    },
    show_upload(){
      if(this.show_upload==false){
        this.show=false;
      }
    },
    // 监视上传照片div宽度,当大于等于四张的时候,88px*4
    fileList(){
      if(this.fileList.length>=4){
          let w=this.file_width.width; //88px
          this.file_width.width=parseInt(w)*(this.fileList.length+1)+"px";
      }else{
          //小于四张的时候固定宽度
          this.file_width.width="330px";
          // console.log(this.file_width.width);
      }
    },
    message(){
      // 如果内容清空则标签不被禁用
      if(this.message==""){
          this.dis_btn1=false;
          this.dis_btn2=false;
          this.dis_btn3=false;
      }
    },
    /** 监听顶部导航 */
  //   navactive(newval){
  //     // 滚动到顶部
  //     window.scrollTo(0,0);
  //     // newval 即是切换到的类别的类别id，可以作为cid发请求
  //     // console.log(newval);
  //     // 初始化页码
  //     this.page = 1;
  //     // 发请求 更新列表
  //     this.loadArticles(newval, 1, (list)=>{
  //       this.articles = list;
  //     });
  //   },
  },
}
</script>

<style scoped>
/* 搜索框 */
.waike .van-search__content {
  border-radius: 8px;
  margin:0 2%;
}
.waike .van-search__action{
  padding-left: 0;
}
.waike .van-search {
  width: 90%;
  margin-left: 5%;
}
.waike .header{
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
}
.waike .index-tabs {
  width: 70%;
  margin-left: 15%;
}
/* 关注，推荐，分类  字体颜色 */
.waike .header>>>.van-tab{
  color: rgb(175, 173, 173);
}
.waike .header>>> .van-tab--active{
  color: #000 ;
}
.waike .header>>> .van-tabs__line{
  width: 20px;
}
/* 内容面板 */
.waike .content {
  overflow-y:scroll; 
  position:fixed; top:7rem; left:0px; right:0px; bottom:50px;
}
.waike .van-action-sheet {
  height: 35%;
}
.waike .upload .container{
    width: 90%;
    margin: 0 auto;
}
.waike .upload .cell_tab {
    text-align:left;
    margin-top:1rem; margin-bottom: 0.7rem;
    background-color:rgba(244, 249, 250,0.8);
}
.waike .upload .tag_btn{
    color:#666; background-color:rgb(235, 234, 234);
    height:2rem; margin-bottom:0.5rem; margin-right:0.5rem;
}
.waike .upload .upload_btn{
    position:fixed;
    top:1rem; right:1.5rem; 
    color:coral; font-weight:700;
}
.waike .upload .upload_img {
    width:100%; height:88px;
    overflow:auto;
    margin-top: 4rem;
}
/* 隐藏滚动条 */
.waike .upload .upload_img::-webkit-scrollbar{
    display: none;
}
.upload_img>>>.van-uploader__wrapper{
  -webkit-flex-wrap:nowrap;
  flex-wrap: nowrap;
}
</style>
